<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>AdminLTE 3 | Dashboard 3</title>

  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome Icons -->
  <link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
  <!-- IonIcons -->
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="dist/css/adminlte.min.css">
  <!-- 引入Bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <!--引入zyp的css-->
  <link rel="stylesheet" href="css/zyp.css">
  <link rel="stylesheet" href="plugins/elementUI/index.css">



</head>
<body class="hold-transition sidebar-mini" style="width: 100%;">
<!-- <div class="wrapper" id="erp"> -->
  <!-- 区域管理 -->
  <div id="erp"> 
        <!-- 导航栏 -->
        <div style="background-color: white; position: relative; top: 2px;">
            <ul class="nav nav-pills nav-stacked" >
                <li><a href="#">表单设计</a></li>
                <li><a href="#">表单配置</a></li>
                <li><a href="#">属性管理</a></li>
                <li><a href="#">菜单管理</a></li>
            </ul>
        </div>
        
        
        <div style="background-color: white; height: 650px; margin-top: 15px; margin-left: 15px; margin-right: 15px; border-radius: 5px;">
            <div style="margin-left: 15px; margin-right: 15px;">
                <!-- 按钮部分-->
                <button type="button" class="btn btn-primary" style="margin-top: 7px; margin-left: 5px;">新增属性</button> 
                <!--右上角三个小图标-->
                <div class="navbar-right" style="margin-right: 5px; margin-top: 15px;">
                    <img src="" class="glyphicon glyphicon-trash">
                    &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
                    <img src="" class="glyphicon glyphicon-refresh">
                    &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
                    <img src="" class="glyphicon glyphicon-fullscreen">
                </div>
                
                <form class="navbar-form navbar-right" role="search">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="请输入属性名称关键字">
                    </div>
                    <button type="submit" class="btn btn-default">搜索</button>
                </form>
                <button class="button button4 navbar-right">全部</button>
                <button class="button button4 navbar-right">启用</button>
                <button class="button button4 navbar-right">禁用</button>
            </div>  
            <!-- 表格部分 -->
            <div style="margin-left: 15px; margin-right: 15px; margin-top: 15px; height: 510px; ">
                <table class="table table-hover">
                    <thead style="background-color: #fafafa;">
                        <tr>
                            <th>序号</th>
                            <th>属性名称</th>
                            <th>类型</th>
                            <th>状态</th>
                            <th>创建时间</th>
                            <th>描述</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>克重范围</td>
                            <td>数字</td>
                            <td>
                                <el-switch
                                v-model="value"
                                active-color="#13ce66"
                                inactive-color="#ff4949">
                                </el-switch>   
                            </td> 
                            <td>2020-01-12 12:07:34</td>
                            <td>这是一段描述……</td>
                            <td>
                                <img class="glyphicon glyphicon-search" src="" >
                                &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
                                <img class="glyphicon glyphicon-edit" src="">
                            </td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>克重范围</td>
                            <td>数字</td>
                            <td>
                                <el-switch
                                v-model="value"
                                active-color="#13ce66"
                                inactive-color="#ff4949">
                                </el-switch>   
                            </td> 
                            <td>2020-01-12 12:07:34</td>
                            <td>这是一段描述……</td>
                            <td>
                                <img class="glyphicon glyphicon-search" src="" >
                                &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
                                <img class="glyphicon glyphicon-edit" src="">
                            </td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>克重范围</td>
                            <td>数字</td>
                            <td>
                                <el-switch
                                v-model="value"
                                active-color="#13ce66"
                                inactive-color="#ff4949">
                                </el-switch>   
                            </td> 
                            <td>2020-01-12 12:07:34</td>
                            <td>这是一段描述……</td>
                            <td>
                                <img class="glyphicon glyphicon-search" src="" >
                                &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
                                <img class="glyphicon glyphicon-edit" src="">
                            </td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>克重范围</td>
                            <td>数字</td>
                            <td>
                                <el-switch
                                v-model="value"
                                active-color="#13ce66"
                                inactive-color="#ff4949">
                                </el-switch>   
                            </td> 
                            <td>2020-01-12 12:07:34</td>
                            <td>这是一段描述……</td>
                            <td>
                                <img class="glyphicon glyphicon-search" src="" >
                                &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
                                <img class="glyphicon glyphicon-edit" src="">
                            </td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>克重范围</td>
                            <td>数字</td>
                            <td>
                                <el-switch
                                v-model="value"
                                active-color="#13ce66"
                                inactive-color="#ff4949">
                                </el-switch>   
                            </td> 
                            <td>2020-01-12 12:07:34</td>
                            <td>这是一段描述……</td>
                            <td>
                                <img class="glyphicon glyphicon-search" src="" >
                                &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
                                <img class="glyphicon glyphicon-edit" src="">
                            </td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>克重范围</td>
                            <td>数字</td>
                            <td>
                                <el-switch
                                v-model="value"
                                active-color="#13ce66"
                                inactive-color="#ff4949">
                                </el-switch>   
                            </td> 
                            <td>2020-01-12 12:07:34</td>
                            <td>这是一段描述……</td>
                            <td>
                                <img class="glyphicon glyphicon-search" src="" >
                                &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
                                <img class="glyphicon glyphicon-edit" src="">
                            </td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>克重范围</td>
                            <td>数字</td>
                            <td>
                                <el-switch
                                v-model="value"
                                active-color="#13ce66"
                                inactive-color="#ff4949">
                                </el-switch>   
                            </td> 
                            <td>2020-01-12 12:07:34</td>
                            <td>这是一段描述……</td>
                            <td>
                                <img class="glyphicon glyphicon-search" src="" >
                                &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
                                <img class="glyphicon glyphicon-edit" src="">
                            </td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>克重范围</td>
                            <td>数字</td>
                            <td>
                                <el-switch
                                v-model="value"
                                active-color="#13ce66"
                                inactive-color="#ff4949">
                                </el-switch>   
                            </td> 
                            <td>2020-01-12 12:07:34</td>
                            <td>这是一段描述……</td>
                            <td>
                                <img class="glyphicon glyphicon-search" src="" >
                                &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
                                <img class="glyphicon glyphicon-edit" src="">
                            </td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>克重范围</td>
                            <td>数字</td>
                            <td>
                                <el-switch
                                v-model="value"
                                active-color="#13ce66"
                                inactive-color="#ff4949">
                                </el-switch>   
                            </td> 
                            <td>2020-01-12 12:07:34</td>
                            <td>这是一段描述……</td>
                            <td>
                                <img class="glyphicon glyphicon-search" src="" >
                                &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
                                <img class="glyphicon glyphicon-edit" src="">
                            </td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>克重范围</td>
                            <td>数字</td>
                            <td>
                                <el-switch
                                v-model="value"
                                active-color="#13ce66"
                                inactive-color="#ff4949">
                                </el-switch>   
                            </td> 
                            <td>2020-01-12 12:07:34</td>
                            <td>这是一段描述……</td>
                            <td>
                                <img class="glyphicon glyphicon-search" src="" >
                                &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
                                <img class="glyphicon glyphicon-edit" src="">
                            </td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>克重范围</td>
                            <td>数字</td>
                            <td>
                                <el-switch
                                v-model="value"
                                active-color="#13ce66"
                                inactive-color="#ff4949">
                                </el-switch>   
                            </td> 
                            <td>2020-01-12 12:07:34</td>
                            <td>这是一段描述……</td>
                            <td>
                                <img class="glyphicon glyphicon-search" src="" >
                                &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
                                <img class="glyphicon glyphicon-edit" src="">
                            </td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>克重范围</td>
                            <td>数字</td>
                            <td>
                                <el-switch
                                v-model="value"
                                active-color="#13ce66"
                                inactive-color="#ff4949">
                                </el-switch>   
                            </td> 
                            <td>2020-01-12 12:07:34</td>
                            <td>这是一段描述……</td>
                            <td>
                                <img class="glyphicon glyphicon-search" src="" >
                                &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
                                <img class="glyphicon glyphicon-edit" src="">
                            </td>
                        </tr>
                    </tbody>
                 </table>
            </div>
            <!-- 分页 -->
            <div style="margin-top: 10px;">
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[12, 200, 300, 400]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400">
               </el-pagination>
            </div>
                
        </div>
  </div>
<!-- </div> -->



<!-- jQuery -->
<script src="plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE -->
<script src="dist/js/adminlte.js"></script>

<!-- OPTIONAL SCRIPTS -->
<script src="plugins/chart.js/Chart.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="dist/js/demo.js"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="dist/js/pages/dashboard3.js"></script>
<!-- 引入vue -->
<script src="plugins/vue-2.6.10/vue-2.6.10/vue-resource.min.js"></script>
<script src="plugins/vue-2.6.10/vue-2.6.10/vue.js"></script>
<!--引入ElementUi-->
<script src="plugins/elementUI/index.js"></script>
<!-- zyp的script-->
<script>
    $(function(){
       var wer = new Vue({
            el:"#erp",
            data() {
                return {
                    //switch开关
                    value: true,
                    //分页
                    currentPage4: 4

                }
            },
            methods: {
                handleSizeChange(val) {
                    console.log('每页 ${val} 条');
                },
                handleCurrentChange(val) {
                    console.log('当前页: ${val}');
                }
            }
        });
    })
   
</script>
</body>
</html>
